<template xmlns="http://www.w3.org/1999/html">
  <div class="home-main">

  <Row style="height: 72px;">
    <Col span="4" class="bk-todo">
        <span>待办合计:</span>
        <a href="#">1036</a>
    </Col>
    <Col span="20">
      <Card style="line-height: 40px">
        <div>数据报告</div>
      </Card>
    </Col>
  </Row>
  <Row class="margin-top-10">
    <Col span="8">
    <div>小标题</div>
    </Col>
    <Col span="8" offset="8">
    <div>本日本周本月</div>
    </Col>
  </Row>
    <Row :gutter="16" class="margin-top-10">
      <Col span="6">
      <Card>
      <data-sourcePie
        title-text="盘源租售比"
        id="data_source_pie1"
        piestyle="1"
      ></data-sourcePie>
      </Card>
      </Col>
      <Col span="6" class-name="padding-left-5">
      <Card>
        <data-sourcePie
          title-text="需求租售比"
          id="data_source_pie2"
          piestyle="1"
        ></data-sourcePie></Card>
      </Col>
      <Col span="6" class-name="padding-left-5">
        <Card>
          <data-sourcePie
            title-text="售盘状态"
            id="data_source_pie3"
            piestyle="2"
          ></data-sourcePie></Card>
      </Col>
      <Col span="6" class-name="padding-left-5">
          <Card>
            <data-sourcePie
              title-text="租盘状态"
              id="data_source_pie4"
              piestyle="2"
            ></data-sourcePie></Card>
      </Col>
    </Row>
    <Row class="margin-top-10">
      <Col span="24">
      <Card>
        <data-change></data-change>
      </Card>
      </Col>
    </Row>

    <Row :gutter="16" class="margin-top-10">
      <Col span="16">
      <Card>
        <div style="height: 300px">
          <line-chart
            title-text="近30天新增趋势图"
           times="2017年9月23日-2017年10月23日"
           id="data_source_con1"
        ></line-chart>
        </div>
      </Card>
      </Col>
      <Col span="8">
      <Card>
        <div style="height: 300px">
          <line-chart
            title-text="近30天跟进增量图"
            times="2017年9月23日-2017年10月23日"
            id="data_source_con2"
            has-legend = "false"
          ></line-chart>
        </div>
      </Card>
      </Col>
    </Row>
    <Row :gutter="16">
      <Col span="16">
      <Row class="margin-top-10">
        <Col span="24">
        <Card>
          <div>本月公司内增量排行</div>
        </Card>
        </Col>
      </Row>
      <Row class="margin-top-10">
        <Col span="24">
          <img src="http://fangmeng-test.oss-cn-hangzhou.aliyuncs.com/uploadfiles/common/cpcloud/2016-08/4c88c2f9-4d97-4742-9f5d-d6c553a30af2.jpg" width="100%"/>
        </Col>
      </Row>
      <Row class="margin-top-10">
        <Col span="24">
        <Card>
          <div>最新广播</div>
        </Card>
        </Col>
      </Row>
      </Col>
      <Col span="8">
        <Row class="margin-top-10">
          <Col span="24">
          <img src="http://fangmeng-test.oss-cn-hangzhou.aliyuncs.com/uploadfiles/common/cpcloud/2016-08/b321d2a9-1e9b-4c78-891e-d119f445b3cb.jpg" width="100%"/>
          </Col>
        </Row>
        <Row class="margin-top-10">
          <Col span="24">
          <img src="http://fangmeng-test.oss-cn-hangzhou.aliyuncs.com/uploadfiles/common/cpcloud/2016-08/4c88c2f9-4d97-4742-9f5d-d6c553a30af2.jpg" width="100%"/>
          </Col>
        </Row>
        <Row class="margin-top-10">
          <Col span="24">
          <img src="http://fangmeng-test.oss-cn-hangzhou.aliyuncs.com/uploadfiles/common/cpcloud/2016-08/b321d2a9-1e9b-4c78-891e-d119f445b3cb.jpg" width="100%"/>
          </Col>
        </Row>
        <Row class="margin-top-10">
          <Col span="24">
          <Card>
            <div>最新房客源</div>
          </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>

</template>

<script>
  import lineChart from './components/lineChart.vue';
  import dataChange from './components/dataChange.vue';
  import dataSourcePie from './components/dataSourcePie.vue';
  import {getRepos}from '../../service'
  import { mapMutations } from 'vuex'
  export default {
    components: {
      lineChart,
      dataChange,
      dataSourcePie
    },
    mounted(){
    this.getRepository();
  },

  methods: {
    ...mapMutations([
      'FAILURE_GET_LOGINS',
      'SUCCESS_GET_LOGINS'
    ]),
    getRepository(){
      let params = {
        sort: 'updated'
      }
      getRepos(params).then(function(respon){
        this.SUCCESS_GET_LOGINS(respon);
        console.info(respon);
      }.bind(this),function(){
        this.FAILURE_GET_LOGINS();
      }.bind(this));
    }
  }
  }
</script>

<style lang="less">
  @import "./home.less";
  @import "../../styles/common.less";
</style>
